<!DOCTYPE html>
<html lang="en">
<head>
<title>How do I create collapsible sections?</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="" name="description">
<link href="../css/help.css" media="all" rel="stylesheet" type="text/css" charset="utf-8">
<link href="/library/webjars/fontawesome/4.7.0/css/font-awesome.min.css" media="screen" rel="stylesheet">
<link href="/library/skin/morpheus-default/tool.css" media="screen" rel="stylesheet" type="text/css" charset="utf-8">
<script src="/library/webjars/jquery/1.12.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/library/js/headscripts.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    includeWebjarLibrary('featherlight');
    $(document).ready(function(){
      $("a.screensteps-image-zoom").featherlight({
        type: { image:true },
        closeOnClick: 'anywhere'
      }); 
    });   
</script>
</head>
<body>
  <div><div>
<div><h1 class="article-title">How do I create collapsible sections?</h1></div>
<div>



      <div class="step screensteps-section screensteps-depth-1">
    <h2 class="step-title screensteps-heading">Go to Lessons.</h2>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/007/053/990/original/4661008c-bebc-494e-95d5-d57fe18cbddc.png" alt="" height="110" width="202">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_59425455-D030-4DAA-A7CF-5152D179B216" class="text-block-content">
    <p>If you titled your page something other than <em>Lessons</em>, select the title of the page as it appears in your Tool Menu.</p>
  </div>
</div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_41761B3A-5389-40F1-95EB-815C8CA27490" class="text-block-content">
    <p>Click on the Lessons tool in the Tool Menu to display the page.</p>
<p><em>Note: The Lesson page must already contain content before you can make a collapsible section. </em></p>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="select-the-column-properties-icon-in-the-top-left-of-the-section">
    <h2 class="step-title screensteps-heading">Select the column properties icon in the top left of the section.</h2>
        <div class="image screensteps-image">
      <a href="https://media.screensteps.com/image_assets/assets/005/076/334/original/a6e54be9-b4b6-4619-a93e-fe3f1889bb9f.png" class="screensteps-image-zoom">
        <img src="https://media.screensteps.com/image_assets/assets/005/076/334/medium/a6e54be9-b4b6-4619-a93e-fe3f1889bb9f.png" alt="" height="253" width="855">
      </a>
  </div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="enter-a-section-title">
    <h2 class="step-title screensteps-heading">Enter a Section title.</h2>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/004/192/251/original/e79a1168-ef1f-45c0-bf70-548f28dca3f4.png" alt="" height="366" width="751">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_1D0BA298-28AF-4FAF-854A-560382B7A2F3" class="text-block-content">
    <p><em>Note: Your section must have a title in order for it to be made collapsible.</em></p>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="check-the-collapsible-box">
    <h2 class="step-title screensteps-heading">Check the Collapsible box.</h2>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/004/192/254/original/0f139f67-02ab-4ddc-ab3e-ca1279eeaac1.png" alt="" height="395" width="752">
  </div>
 
        <div class="step screensteps-section screensteps-depth-2" id="optionally-you-may-also-select-the-start-closed-option-if-you-prefer-for-the-section-to-be-collapsed-upon-access">
    <h3 class="step-title screensteps-heading">Optionally, you may also select the Start Closed option if you prefer for the section to be collapsed upon access.</h3>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/005/076/336/original/e0c4f438-cc89-4e68-8490-849452849b03.png" alt="" height="392" width="755">
  </div>
 
  </div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1">
    <h2 class="step-title screensteps-heading">Click Save.</h2>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/004/192/259/original/d6492a08-f6b2-4a0d-b925-c56a90a8ff88.png" alt="" height="393" width="754">
  </div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="the-collapsible-section-will-display">
    <h2 class="step-title screensteps-heading">The collapsible section will display.</h2>
        <div class="image screensteps-image">
      <a href="https://media.screensteps.com/image_assets/assets/004/192/262/original/a7267e5e-114c-4582-9cf3-a68a0ed330a7.png" class="screensteps-image-zoom">
        <img src="https://media.screensteps.com/image_assets/assets/004/192/262/medium/a7267e5e-114c-4582-9cf3-a68a0ed330a7.png" alt="" height="123" width="855">
      </a>
  </div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="click-on-the-section-heading-area-to-expand-or-collapse">
    <h2 class="step-title screensteps-heading">Click on the section heading area to expand or collapse.</h2>
        <div class="image screensteps-image">
      <a href="https://media.screensteps.com/image_assets/assets/004/196/212/original/20c420f5-0d6c-405c-8330-01215ed10bc8.png" class="screensteps-image-zoom">
        <img src="https://media.screensteps.com/image_assets/assets/004/196/212/medium/20c420f5-0d6c-405c-8330-01215ed10bc8.png" alt="" height="241" width="855">
      </a>
  </div>
 
  </div>


</div>
</div></div>
</body>
</html>
